<template>
  <div class="card">
    <!-- 表单 -->
    <el-card>
      <div class="form">
        <el-form inline>
          <el-form-item label="员工账号">
            <el-input v-model="pagingData.employeeNumber" placeholder="请输入员工账号" />
          </el-form-item>
          <el-form-item label="员工姓名">
            <el-input v-model="pagingData.name" placeholder="请输入员工姓名" />
          </el-form-item>
          <el-form-item label="工作模式">
            <el-select v-model="pagingData.workPatternId">
              <el-option
                v-for="item in workPatternList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="月份" style="padding-left: 30px; padding-right: 30px;">
            <div class="block">
              <el-date-picker
                type="month"
              />
            </div>
          </el-form-item>
          <el-form-item label="所属机构">
            <pulldown-tree
              :props="treeSelectProps"
              :options="catTreeData"
            />
          </el-form-item>
          <el-row type="flex" justify="center">
            <el-form-item>
              <el-button class="el-button el-button--default" @click="search">搜索</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <!-- 表格 -->
    <el-card>
      <el-button @click="Schedule ">排版设置</el-button>
      <el-button>绑定排版</el-button>
      <el-table style="width: 100%" :data="list">
        <el-table-column type="selection" />
        <el-table-column label="员工账号" stripe style="width: 100%" fixed prop="employeeNumber" />
        <el-table-column label="员工姓名" width="120" fixed prop="name" />
        <el-table-column label="员工手机号" width="120" prop="phone" fixed />
        <el-table-column label="员工角色" width="120" fixed prop="userType">
          <template #default="{row}">
            <span v-if="row.userType === 1">员工</span>
            <span v-else-if="row.userType === 2">快递员</span>
            <span v-else>司机</span>
          </template>
        </el-table-column>
        <el-table-column label="当前工作模式" fixed width="150" prop="workPatternName" />
        <el-table-column v-for="(item,index) in 30" :key="item.id" :label="`${index + 1}`">
          <template #default="{row}">
            <span :class=" ! row.workSchedules[index]? 'work' : 'rest' ">{{ !row.workSchedules[index]? '上' : '休' }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center">
        <div class="block">
          <el-pagination
            :current-page="pagingData.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pagingData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="+total"
            @current-change="onPaging"
          />
        </div>
      </el-row>

    </el-card>
  </div>
</template>

<script>
import { composingStaffAPI, workPatternListAPI } from '@/api/employee'
import pulldownTree from './components/pulldown-tree.vue'
import { gitOrganizationListAPI } from '@/api/basicData'
// import router from '@/router'
export default {
  name: 'Scheduling',
  components: { pulldownTree },
  data() {
    return {
      // 下拉树状字段
      treeSelectProps: {
        label: 'name', // 显示名称
        children: 'children' // 子级字段名
      },
      // 所属机构
      catTreeData: [],
      // 表格分页数据
      list: [],
      // 表格总页数
      total: 0,
      // 分页数据
      pagingData: {
        agencyId: '',
        employeeNumber: '',
        month: '',
        name: '',
        page: 1,
        // 页面显示的数量
        pageSize: 2,
        userType: '',
        workPatternId: ''
      },
      // 工作模式
      workPatternList: []
    }
  },
  created() {
    // 分页查询
    this.schedulingTable()
    // 工作模式列表查询
    this.gitWorkPatternList()
    // 所属机构
    this.belongInstitution()
  },
  methods: {
    // 分页查询
    async schedulingTable() {
      const res = await composingStaffAPI(this.pagingData)
      console.log('res  ----->  ', res)
      this.list = res.data.items// 表格分页数据
      this.pagingData.page = res.data.page// 当前页
      this.total = res.data.counts// 总页数
    },
    // 分页查询
    onPaging(page) {
      console.log('page  ----->  ', page)
      this.pagingData.page = page
      this.schedulingTable()
    },
    // 工作模式分页列表查询
    async gitWorkPatternList() {
      const res = await workPatternListAPI()
      console.log('res  ----->  ', res)
      this.workPatternList = [...res.data[1], ...res.data[2]]
    },
    // 所属机构
    async belongInstitution() {
      const res = await gitOrganizationListAPI()
      this.catTreeData = JSON.parse(res.data)
      console.log('res  ----->  ', res)
    },
    // 搜索
    search() {
      this.schedulingTable()
    },
    // 重置表单
    reset() {
      this.pagingData = {
        agencyId: '',
        employeeNumber: '',
        month: '',
        name: '',
        page: 1,
        // 页面显示的数量
        pageSize: 10,
        userType: '',
        workPatternId: ''
      }
      // 重新发送
      this.schedulingTable()
    },
    // 排版设置打开
    Schedule() {
      this.$router.push('Schedule-setting')
    }
  }
}
</script>

<style lang="scss" scoped>
.card{
  width: 1670px;
  margin-left: 20px;
  margin-top: 20px;
}
::v-deep .el-card__body{
   width: 100%;

}
// ::v-deep .el-input__inner{
//   width: 400px;
//   // margin-left:122px
// }
// ::v-deep .el-form--inline .el-form-item__label{
//     float: none;
//     display: inline-block;
//     // margin-left: 120px;
//     // margin-right: 60px;
// }
// ::v-deep .el-card .is-always-shadow{
//    margin-top: 100px;
// }
.work{
      width: 24px;
    height: 24px;
    background: #ffeeeb;
    border: 1px solid #e15536;
    border-radius: 50%;
    text-align: center;
    color: #e15536;
    font-size: 13px;
}
// ::v-deep .form .el-input__inner{
//   // -webkit-appearance: none; */
//     background-color: #fff;
//     background-image: none;
//     border-radius: 4px;
//     border: 1px solid #dcdfe6;
//     -webkit-box-sizing: border-box;
//     box-sizing: border-box;
//     color: #606266;
//     display: inline-block;
//     font-size: inherit;
//     height: 40px;
//     line-height: 40px;
//     outline: 0;
//     padding: 0 15px;
//     -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
//     transition: border-color .2s cubic-bezier(.645,.045,.355,1);
//     width: 300px;
// }
// .card__body .el-row .el-col .el-button{
//       width: 90px;
//     padding: 10px 20px!important;
//     border-radius: 5px!important;
//     font-weight: 400;
// }
// .el-button.el-button--warning {
//     width: 100px;
//     height: 40px;
//     background: #e15536;
//     border-radius: 4px;
//     border-color: transparent;
// }
</style>
